import Easy, { Component } from '../easy/index'
// function Alert(props) {
//     return (<div>{props.title}</div>)
// }
class Alert extends Component {
    componentDidMount() {
        console.log('ALERT MOUNT')
    }
    render() {
        return (
            <div>12312312</div>
        )
    }
}
let id=5
export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: 'App',
            list: [
                {
                    id: 1,
                    title: '11111'
                }, {
                    id: 2,
                    title: '22222'
                }, {
                    id: 3,
                    title: '33333'
                },
                {
                    id: 4,
                    title: '44444'
                }
            ]
        }
        this.changeTitle = this.changeTitle.bind(this)
    }
    changeTitle() {
        let state = JSON.parse(JSON.stringify(this.state.list))
        state.pop()
        this.setState({
            list:state
        })
    }
    componentDidMount() {
        console.log('componentDidMount')
        console.log(this.title)
    }
    componentDidUpdate() {
        console.log('update')
    }
    render() {
        return (
            <div>
                <h1 ref={title => {
                    this.title = title
                }}>{this.state.title}</h1>
                <div>{this.props.title}</div>

                <div><button onClick={this.changeTitle}>修改标题</button></div>
                <Alert title="Alert" ref={alert => this.alert = alert} />
                <ul>
                    {
                        this.state.list.map(item => (
                            <li key={item.id}>{item.title}</li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}